import type { SogouElements } from '../../../../../../../../types/constants/personalization/sogou'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  BodyAttrs,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class SogouWeixinPage {
  elements: SogouElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO_GOU]
  private static instance: SogouWeixinPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SogouWeixinPage {
    if (!SogouWeixinPage.instance) {
      SogouWeixinPage.instance = new SogouWeixinPage()
    }
    return SogouWeixinPage.instance
  }

  init(): void {
  }

  hideStyles(): string {
    return `
/* 隐藏样式 */
#wrapper #main:has(.wx-topbox.${AppStyleCollections.Hide.AD}, .wx-topbox[${BodyAttrs.HIDE_TYPE}]) {
  .news-list {
    margin-top: 24px !important;
  }
}
`
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  getMainStyles(): string {
    return `
${this.hideStyles()}

/* 存在悬浮搜索时，隐藏 logo，避免闪烁 */
.header-box:has(.headsearch) {
  .headsearch .login {
    display: none !important;
  }
}

/* 顶部菜单 */    
.header-box {
  background-color: var(${this.themeVarService.search.header.background}) !important;
  padding-bottom: 20px !important;
  height: auto !important;

  .login-info {
    a {
      color: var(${this.themeVarService.search.default.text}) !important;
      
      &:hover {
        color: var(${this.themeVarService.link.default.textHover}) !important;
        text-decoration: none !important;
      }
    }
  }
  
  .header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    
    .logo {
      position: fixed !important;
      left: 20px !important;
    }
    
    [name="searchForm"] {
      .suggestion {
        .suglist {
          font-size: ${this.themeVarService.search.default.fontSize} !important;
          
          > li {
            color: var(${this.themeVarService.search.suggestions.text}) !important;
            
            &[history] {
              color: var(${this.themeVarService.search.history.text}) !important;
            }
            
            &:not([history]):has(b) {
              color: var(${this.themeVarService.em.text}) !important;
              
              b {
                color: var(${this.themeVarService.search.suggestions.text}) !important;
                font-weight: 400 !important;
              }
            }
          }
        }
      }
    }
  }
  
  /* 悬浮搜索 */
  .headsearch {
    background-color: var(${this.themeVarService.search.header.background}) !important;
    border-bottom: none !important;
    height: auto !important;
    padding: 20px 0 !important;
    
    .hsform {
      width: fit-content !important;
    }
  }
}

/* 主内容 */
#wrapper {
  min-width: 100% !important;
  padding: 0 !important;

  #main {
    width: 100% !important;

    .wx-topbox {
      border-bottom: none !important;
      
      #text {
        text-align: center !important;
      }
    }

    /* 搜索结果列表 */
    .news-list {
      display: grid !important;
      grid-template-columns: repeat(1, auto);
      justify-content: center !important;
      gap: ${this.themeVarService.search.resultItem.gap} !important;

      /* 结果项 */
      > li {
        position: relative !important;
        background: var(${this.themeVarService.search.resultItem.background}) !important;
        box-shadow: var(${this.themeVarService.search.resultItem.shadow}) !important;
        border-radius: ${this.themeVarService.search.resultItem.borderRadius} !important;
        padding: ${this.themeVarService.search.resultItem.padding} !important;
        overflow: hidden !important;
        border-bottom: none !important;
        
        /* 标题 */
        h3 {
          ${this.searchCommonStyles.titleStyles()}
        }
      }
    }
  }
}

/* 返回顶部 */
.back-top {
  display: none !important;
}

/* 顶部搜索 */
.bottom-form {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}
`
  }
}
